<!-- 网站信息 -->
<template>
	<div class="website-information">
		<el-form ref="formRef" :rules="rules" class="ls-form" :model="formData" label-width="120px">
			<el-card shadow="never" class="!border-none">
				<div class="text-xl font-medium mb-[20px]">前台设置</div>
				<el-form-item label="前台名称" prop="shop_name">
					<div class="w-80">
						<el-input v-model.trim="formData.shop_name" placeholder="请输入前台名称" maxlength="30"
							show-word-limit></el-input>
					</div>
				</el-form-item>
				<el-form-item label="前台LOGO" prop="shop_logo">
					<div>
						<material-picker v-model="formData.shop_logo" :limit="1" />
						<div class="form-tips">比例：1:1，支持jpg，jpeg，png格式</div>
					</div>
				</el-form-item>
				<!-- <el-form-item label="前台LOGO" prop="shop_logo">
					<div>
						<material-picker v-model="formData.shop_logo2" :limit="1" />
						<div class="form-tips">比例：1:1，支持jpg，jpeg，png格式</div>
					</div>
				</el-form-item> -->
				<el-form-item label="用户默认头像" required>
					<div>
						<material-picker v-model="formData.default_avatar" :limit="1" />
					</div>
				</el-form-item>
				<el-form-item>
					<div>
						<div class="form-tips">
							用户注册时给的默认头像，比例：1:1，支持jpg，jpeg，png格式
						</div>
					</div>
				</el-form-item>
				<!-- <el-form-item label="首页客服LOGO" prop="kefu_logo">
					<div>
						<material-picker v-model="formData.kefu_logo" :limit="1" />
						<div class="form-tips">比例：1:1，支持jpg，jpeg，png格式</div>
					</div>
				</el-form-item>
				<el-form-item label="首页客服状态" prop="show_kefu">
					<div>
						<el-switch v-model="formData.show_kefu" :active-value="1" :inactive-value="0" />
						<span class="mt-1 ml-2">
							{{ formData.show_kefu ? '开启' : '关闭' }}
						</span>
					</div>
				</el-form-item>
				<el-form-item label="首页客服链接" prop="kefu_link">
					<div class="w-80">
						<el-input v-model.trim="formData.kefu_link" placeholder="请输入首页客服链接"></el-input>
					</div>
				</el-form-item> -->
				<el-form-item label="IP可注册数量" prop="ip_num">
					<div>
						<el-input v-model="formData.ip_num" type="number" placeholder="Please input" />
					</div>
				</el-form-item>
				<!-- <el-form-item label="默认货币" prop="currency">
					<div class="w-80">
						<el-input v-model.trim="formData.currency" placeholder="请输入默认货币"></el-input>
						<div class="form-tips">请勿随意修改，如需修改需联系技术人员</div>
					</div>
				</el-form-item>
				<el-form-item label="默认货币" prop="currency">
					<div class="w-80">
						<el-input v-model.trim="formData.currency2" placeholder="请输入默认货币"></el-input>
						<div class="form-tips">请勿随意修改，如需修改需联系技术人员</div>
					</div>
				</el-form-item>
				<el-form-item label="显示精度" prop="precision">
					<div class="w-80">
						<el-input v-model.trim="formData.precision" type="number" placeholder="请输入显示精度"></el-input>
						<div class="form-tips">前端金额小数点位数，请勿随意修改，如需修改需联系技术人员</div>
					</div>
				</el-form-item> -->

				<el-form-item label="初始支付密码" prop="password_pay">
					<div>
						<el-input v-model="formData.password_pay" type="number" placeholder="Please input" />
						<div class="form-tips">初始支付密码</div>
					</div>
				</el-form-item>
				<!-- <el-form-item label="强制绑定手机" prop="coerce_mobile">
					<div>
						<el-switch v-model="formData.coerce_mobile" :active-value="1" :inactive-value="0" />
						<span class="mt-1 ml-2">{{
				            formData.coerce_mobile ? '开启' : '关闭'
				        }}</span>

						<div class="form-tips">
							1、如果开启，则新用户在注册完成之后要强制绑定手机号<br />
							2、老用户登录时如果检测到没有绑定手机，则要重新绑定手机号
						</div>
					</div>
				</el-form-item> -->
				<el-form-item label="强制填写邀请码" prop="invite_code">
					<div>
						<el-switch v-model="formData.invite_code" :active-value="1" :inactive-value="0" />
						<span class="mt-1 ml-2">
							{{ formData.invite_code ? '开启' : '关闭' }}
						</span>

						<div class="form-tips">注册时，是否强制输入邀请码</div>
					</div>
				</el-form-item>
				<el-form-item label="多处登录" prop="multipoint_login">
					<div>
						<el-switch v-model="formData.multipoint_login" :active-value="1" :inactive-value="0" />
						<span class="mt-1 ml-2">
							{{ formData.multipoint_login ? '开启' : '关闭' }}
						</span>

						<div class="form-tips">允许多人同时在线登录</div>
					</div>
				</el-form-item>
				<el-form-item label="前台链接" prop="front_link">
					<div class="w-80">
						<el-input v-model.trim="formData.front_link" placeholder="请输入前台链接"></el-input>
						<div class="form-tips">用于生成邀请链接跟邀请码</div>
					</div>
				</el-form-item>
				<!-- <el-form-item label="APP下载地址" prop="down_link">
					<div class="w-80">
						<el-input v-model.trim="formData.down_link" placeholder="请输入APP下载地址"></el-input>
					</div>
				</el-form-item>
				<el-form-item label="下载状态" prop="is_down">
					<div>
						<el-switch v-model="formData.is_down" :active-value="1" :inactive-value="0" />
						<span class="mt-1 ml-2">
							{{ formData.is_down ? '显示' : '隐藏' }}
						</span>
						<div class="form-tips">隐藏后，登录注册页面不显示下载按钮</div>
					</div>
				</el-form-item> -->
				<!-- <el-form-item label="合同-乙方LOGO" prop="contract_y_logo">
					<div>
						<material-picker v-model="formData.contract_y_logo" :limit="1" />
						<div class="form-tips">比例：1:1，支持jpg，jpeg，png格式</div>
					</div>
				</el-form-item>
				<el-form-item label="合同-丙方LOGO" prop="contract_b_logo">
					<div>
						<material-picker v-model="formData.contract_b_logo" :limit="1" />
						<div class="form-tips">比例：1:1，支持jpg，jpeg，png格式</div>
					</div>
				</el-form-item> -->
			</el-card>
			<el-card shadow="never" class="!border-none mt-4">
				<div class="text-xl font-medium mb-[20px]">后台设置</div>
				<el-form-item label="网站名称" prop="name">
					<div class="w-80">
						<el-input v-model.trim="formData.name" placeholder="请输入网站名称" maxlength="30" show-word-limit />
					</div>
				</el-form-item>
				<el-form-item label="网站图标" prop="web_favicon" required>
					<div>
						<material-picker v-model="formData.web_favicon" :limit="1" />
						<div class="form-tips">建议尺寸：100*100像素，支持jpg，jpeg，png格式</div>
					</div>
				</el-form-item>
				<el-form-item label="网站LOGO" prop="web_logo" required>
					<div>
						<material-picker v-model.trim="formData.web_logo" :limit="1" />
						<div class="form-tips">建议尺寸：100*100像素，支持jpg，jpeg，png格式</div>
					</div>
				</el-form-item>
				<el-form-item label="登录页广告图" prop="login_image" required>
					<div>
						<material-picker v-model.trim="formData.login_image" :limit="1" />
						<div class="form-tips">建议尺寸：100*100像素，支持jpg，jpeg，png格式</div>
					</div>
				</el-form-item>
				<el-form-item label="系统日志" prop="log_way">
					<div>
						<el-checkbox-group v-model="formData.log_way">
							<el-checkbox label="1">记录GET</el-checkbox>
							<el-checkbox label="2">记录POST</el-checkbox>
						</el-checkbox-group>
						<div class="form-tips">日志记录方式，选中则记录对应日志</div>
					</div>
				</el-form-item>
				<el-form-item label="订单提醒" prop="warm">
					<div>
						<el-switch v-model="formData.warm" :active-value="1" :inactive-value="0" />
						<span class="mt-1 ml-2">
							{{ formData.warm ? '开启' : '关闭' }}
						</span>

						<div class="form-tips">开启后，新充值、提现会实时显示角标</div>
					</div>
				</el-form-item>
				<el-form-item label="谷歌验证" prop="google_auth">
					<div>
						<el-switch v-model="formData.google_auth" :active-value="1" :inactive-value="0" />
						<span class="mt-1 ml-2">
							{{ formData.google_auth ? '开启' : '关闭' }}
						</span>

						<div class="form-tips">开启后，登录需要填写Google Authenticator验证码</div>
					</div>
				</el-form-item>
			</el-card>

			<el-card shadow="never" class="!border-none mt-4">
				<div class="text-xl font-medium mb-[20px]">代理端设置</div>
				<el-form-item label="网站名称" prop="agent_name">
					<div class="w-80">
						<el-input v-model.trim="formData.agent_name" placeholder="请输入网站名称" maxlength="30"
							show-word-limit />
					</div>
				</el-form-item>
				<el-form-item label="网站图标" prop="agent_web_favicon" required>
					<div>
						<material-picker v-model="formData.agent_web_favicon" :limit="1" />
						<div class="form-tips">建议尺寸：100*100像素，支持jpg，jpeg，png格式</div>
					</div>
				</el-form-item>
				<el-form-item label="网站LOGO" prop="agent_web_logo" required>
					<div>
						<material-picker v-model.trim="formData.agent_web_logo" :limit="1" />
						<div class="form-tips">建议尺寸：100*100像素，支持jpg，jpeg，png格式</div>
					</div>
				</el-form-item>
				<el-form-item label="登录页广告图" prop="agent_login_image" required>
					<div>
						<material-picker v-model.trim="formData.agent_login_image" :limit="1" />
						<div class="form-tips">建议尺寸：100*100像素，支持jpg，jpeg，png格式</div>
					</div>
				</el-form-item>
				<el-form-item label="谷歌验证" prop="agent_google_auth">
					<div>
						<el-switch v-model="formData.agent_google_auth" :active-value="1" :inactive-value="0" />
						<span class="mt-1 ml-2">
							{{ formData.agent_google_auth ? '开启' : '关闭' }}
						</span>

						<div class="form-tips">开启后，登录需要填写Google Authenticator验证码</div>
					</div>
				</el-form-item>
			</el-card>
			<!-- <el-card shadow="never" class="!border-none mt-4">
                <div class="text-xl font-medium mb-[20px]">PC端设置</div>
                <el-form-item label="PC端LOGO" prop="pc_logo">
                    <div>
                        <material-picker v-model="formData.pc_logo" :limit="1" />
                        <div class="form-tips">建议尺寸：120*28px，支持jpg，jpeg，png格式</div>
                    </div>
                </el-form-item>
                <el-form-item label="网站标题" prop="pc_title">
                    <div class="w-80">
                        <el-input
                            v-model.trim="formData.pc_title"
                            placeholder="请输入PC端网站标题"
                            maxlength="30"
                            show-word-limit
                        />
                    </div>
                </el-form-item>
                <el-form-item label="网站图标" prop="pc_ico">
                    <div>
                        <material-picker v-model="formData.pc_ico" :limit="1" />
                        <div class="form-tips">建议尺寸：100*100像素，支持jpg，jpeg，png格式</div>
                    </div>
                </el-form-item>
                <el-form-item label="网站描述" prop="pc_desc">
                    <div class="w-80">
                        <el-input
                            v-model.trim="formData.pc_desc"
                            placeholder="请输入PC端网站描述"
                        />
                    </div>
                </el-form-item>
                <el-form-item label="网站关键词" prop="pc_keywords">
                    <div class="w-80">
                        <el-input
                            v-model.trim="formData.pc_keywords"
                            placeholder="请输入PC端网站关键词"
                        />
                    </div>
                </el-form-item>
            </el-card> -->
		</el-form>
		<footer-btns v-perms="['setting.web.web_setting/setWebsite']">
			<el-button type="primary" @click="handleSubmit">保存</el-button>
		</footer-btns>
	</div>
</template>

<script lang="ts" setup name="webInformation">
	import { getWebsite, setWebsite } from '@/api/setting/website'
	import useAppStore from '@/stores/modules/app'
	import type { FormInstance } from 'element-plus'
	const formRef = ref<FormInstance>()

	const appStore = useAppStore()
	// 表单数据
	const formData = reactive({
		name: '', // 网站名称
		log_way: [],
		web_favicon: '', // 网站图标
		web_logo: '', // 网站logo
		login_image: '', // 登录页广告图
		shop_name: '',
		shop_logo: '',
		shop_logo2: '',
		pc_logo: '',
		pc_title: '',
		pc_desc: '',
		pc_ico: '',
		pc_keywords: '',
		currency: '',
		currency2: '',
		precision: 2,
		default_avatar: '',
		login_way: [],
		password_pay: '',
		coerce_mobile: 0,
		// country_code: '',
		invite_code: 0,
		warm: 0,
		google_auth: 0,
		multipoint_login: 1,
		down_link: '',
		is_down: 1,
		ip_num: 5,
		front_link: '',
		contract_y_logo: '',
		contract_b_logo: '',

		agent_name: '',
		agent_web_favicon: '',
		agent_web_logo: '',
		agent_login_image: '',
		agent_google_auth: 0,
		kefu_logo: '',
		show_kefu: 1,
		kefu_link: ''
	})

	// 表单验证
	const rules = {
		kefu_logo: [
			{
				required: true,
				message: '请选择客服LOGO',
				trigger: ['change']
			}
		],
		kefu_link: [
			{
				required: true,
				message: '请输入客服链接',
				trigger: ['blur']
			}
		],
		name: [
			{
				required: true,
				message: '请输入网站名称',
				trigger: ['blur']
			}
		],
		web_favicon: [
			{
				required: true,
				message: '请选择网站图标',
				trigger: ['change']
			}
		],
		web_logo: [
			{
				required: true,
				message: '请选择网站logo',
				trigger: ['change']
			}
		],
		login_image: [
			{
				required: true,
				message: '请选择登录页广告图',
				trigger: ['change']
			}
		],
		shop_name: [
			{
				required: true,
				message: '请输入店铺/商城名称',
				trigger: ['blur']
			}
		],
		shop_logo: [
			{
				required: true,
				message: '请选择商城LOGO',
				trigger: ['change']
			}
		],
		shop_logo2: [
			{
				required: true,
				message: '请选择商城LOGO',
				trigger: ['change']
			}
		],
		front_link: [
			{
				required: true,
				message: '请输入前台链接',
				trigger: ['blur']
			}
		],
		pc_logo: [
			{
				required: true,
				message: '请选择PC端LOGO',
				trigger: ['change']
			}
		],
		pc_title: [
			{
				required: true,
				message: '请输入PC端网站标题',
				trigger: ['blur']
			}
		],
		pc_ico: [
			{
				required: true,
				message: '请选择PC端网站图标',
				trigger: ['change']
			}
		],
		// currency: [
		// 	{
		// 		required: true,
		// 		message: '请输入默认货币',
		// 		trigger: ['blur']
		// 	}
		// ],
		// currency2: [
		// 	{
		// 		required: true,
		// 		message: '请输入默认货币',
		// 		trigger: ['blur']
		// 	}
		// ],
		precision: [
			{
				required: true,
				message: '请输入显示精度',
				trigger: ['blur']
			}
		],
		default_avatar: [
			{
				required: true,
				message: '请选择用户默认头像',
				trigger: ['change']
			}
		],
		loginWay: [
			{
				required: true,
				validator: (rule : any, value : any, callback : any) => {
					const loginWay = formData.login_way.join('').length
					if (loginWay === 0) {
						callback(new Error('登录方式至少选择一项！'))
					} else {
						if (formData.login_way !== '') {
							if (!formRef.value) return
							formRef.value.validateField('checkPass', () => null)
						}
						callback()
					}
				},
				trigger: 'change'
			}
		],
		coerce_mobile: [{ required: true, trigger: 'blur' }],
		// country_code: [{ required: true, trigger: 'blur' }],
		password_pay: [{ required: true, trigger: 'blur' }],
		invite_code: [{ required: true, trigger: 'blur' }],
		ip_num: [{ required: true, trigger: 'blur' }],

		agent_name: [
			{
				required: true,
				message: '请输入网站名称',
				trigger: ['blur']
			}
		],
		agent_web_favicon: [
			{
				required: true,
				message: '请选择网站图标',
				trigger: ['change']
			}
		],
		agent_web_logo: [
			{
				required: true,
				message: '请选择网站logo',
				trigger: ['change']
			}
		],
		agent_login_image: [
			{
				required: true,
				message: '请选择登录页广告图',
				trigger: ['change']
			}
		]
	}

	// 获取备案信息
	const getData = async () => {
		const data = await getWebsite()
		for (const key in formData) {
			//@ts-ignore
			formData[key] = data[key]
		}
	}

	// 设置备案信息
	const handleSubmit = async () => {
		await formRef.value?.validate()
		await setWebsite(formData)
		appStore.getConfig()
		getData()
	}

	getData()
</script>

<style lang="scss" scoped></style>